<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div style="margin-bottom: 15px;">
        <input type="text" id="username"  placeholder="请输入姓名">
        <input type="text" id="age" placeholder="请输入性别">
        <input type="text" id="sex"  placeholder="请输入年龄">
        <input type="button" value="提交" id="btn">
    </div>
    <table border="1" width="540">
        <thead>
            <tr>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
//         // 1.先获取本地存储
//     const data =localStorage.getItem('student')
//     console.log(data);
//     // 2.如果本地有就传数据，没有就第一一个空的数组
// // 3.渲染模块


//     const initData=data ?JSON.parse(data):[]
//     console.log(initData);
//     // const username=document.querySelector('#username')
//     // const age=document.querySelector('#age')
//     // const sex=document.querySelector('#sex')
//     const btn=document.querySelector('#btn')
   
//     const tbody=document.querySelector('tbody')
//     // 渲染模块
//     rodent()
// function rodent(){
   
//     let trAll=initData.map(function(item,index){
//         return  `
//         <tr>
//                 <td>${item.username}</td>
//                 <td>${item.age}</td>
//                 <td>${item.sex}</td>
//                 <td><a href="javascript:;"data-id=${index}>删除</a></td>
//             </tr>
//         `
//     })
//   tbody.innerHTML=trAll.join('')
//  age.value=''
//     }
//  rodent()
// // 4.录入模块
// const div=document.querySelector('div')
// const items=div.querySelectorAll('[id]')
// btn.addEventListener('click',function(e){
// e.preventDefault()
// let obj={}
// for (let index = 0; index < items.length; index++) {
//     const item = items[index];
//     if( items[index].value===''){
// return alert('输入的内容不能为空')
//     }
//     obj[item.id]=item.value
// }
// initData.push(obj)
// age.value=''
// username.value=''
// sex.value=''
//     localStorage.setItem('student',JSON.stringify(initData))
//     rodent()
    
// })
// // 5.删除模块
// tbody.addEventListener('click',function(e){
//     if(e.target.tagName==="A"){
//         initData.splice(e.target.dataset.id,1)
//         localStorage.setItem('student',JSON.stringify(initData))
//         rodent()
//     }
// })
const data =localStorage.getItem('student')
const initData=data ? JSON.parse(data):[]
const tbody=document.querySelector('tbody')
const btn=document.querySelector('#btn')
const div=document.querySelector('div')
const items=div.querySelectorAll('[id]')
rodent()
function rodent(){

    let trAll=initData.map(function(item,index){
        return `
        <tr>
                <td>${item.username}</td>
                <td>${item.age}</td>
                <td>${item.sex}</td>
                <td><a href='javascript:;' data-id=${index}>删除</a></td>
            </tr>
        `
       
    })
    tbody.innerHTML=trAll.join('')
}
rodent()
btn.addEventListener('click',function(e){
e.preventDefault()
let  obj={}
for (let index = 0; index < items.length; index++) {
    const item =items[index];
    if (items[index].value==='') {
        return alert('输入的内容不能为空')
    }
    obj[item.id]=item.value
}
initData.push(obj)
localStorage.setItem('student',JSON.stringify(initData))
rodent()
username.value=''
age.value=''
sex.value=''
})
tbody.addEventListener('click',function(e){
if(e.target.tagName==='A'){
    initData.splice(e.target.dataset.id,1)
    localStorage.setItem('student',JSON.stringify(initData))
    rodent()
}
})
    </script>
</body>

</html>